<template>
	<el-drawer v-model="show" :title="addForm?.id ? '编辑人员信息' : '新增人员'" :size="550" :close-on-click-modal="false"
		:close-on-press-escape="false">
		<el-form :model="addForm" label-width="auto" ref="addFormRef" :rules="rules">
			<el-form-item label="员工姓名" prop="name">
				<el-input v-model="addForm.name" placeholder="请输入员工姓名" clearable />
			</el-form-item>
			<el-form-item label="员工头像" prop="avatar">
				<el-upload :class="$style['logo-uploader']" :show-file-list="false" :on-change="beforeUpload"
					:http-request="handleUpload">
					<img :src="addForm.avatar" :class="$style['logo-avatar']"
						v-if="addForm.avatar && typeof addForm.avatar === 'string'" />
					<el-icon :class="$style['avatar-uploader-icon']" v-else>
						<Plus />
					</el-icon>
				</el-upload>
			</el-form-item>
			<el-form-item label="员工性别" prop="gender">
				<el-radio-group v-model="addForm.gender">
					<el-radio :value="1">男</el-radio>
					<el-radio :value="2">女</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="所属组织">
				<el-cascader :options="trees" v-model="addForm.group_id" :props="props" placeholder="请选择所属组织"
					style="width:100%;" clearable />
			</el-form-item>
			<el-form-item label="员工卡号" prop="job_number">
				<el-input v-model="addForm.job_number" placeholder="请输入员工卡号" clearable />
			</el-form-item>
			<el-form-item label="联系电话" prop="mobile">
				<el-input v-model="addForm.mobile" placeholder="请输入联系电话" clearable />
			</el-form-item>
			<el-form-item label="员工类型" prop="type">
				<el-select v-model="addForm.type" placeholder="请选择员工类型" clearable>
					<el-option label="内部员工" :value="1" />
					<el-option label="外部访客" :value="2" />
				</el-select>
			</el-form-item>
			<el-form-item label="证件类型" prop="id_type">
				<el-select v-model="addForm.id_type" placeholder="请选择证件类型" clearable>
					<el-option label="身份证" :value="1" />
					<el-option label="护照" :value="2" />
					<el-option label="其他证件" :value="3" />
				</el-select>
			</el-form-item>
			<el-form-item label="证件号码" prop="id_number">
				<el-input v-model="addForm.id_number" placeholder="请输入证件号码" clearable />
			</el-form-item>
			<el-form-item label="出生日期" prop="birthday">
				<el-date-picker v-model="addForm.birthday" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
					placeholder="请选择出生日期" style="width:100%;" clearable />
			</el-form-item>
			<el-form-item label="员工籍贯">
				<el-input v-model="addForm.native" placeholder="请输入员工籍贯" clearable />
			</el-form-item>
			<el-form-item label="家庭住址">
				<el-input v-model="addForm.address" placeholder="请输入家庭住址" clearable />
			</el-form-item>
			<!-- <el-form-item label="有效期">
				<el-input v-model="addForm.valid_date" placeholder="请输入有效期" clearable />
			</el-form-item> -->
		</el-form>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="show = false">取消</el-button>
				<el-button type="primary" :loading="loading" @click="onSubmit">确认</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { fetchUserGroup, fetchCreateUser } from '@/api/user.services'
import { ElMessage } from 'element-plus'
const emits = defineEmits(['success'])
const show = ref(false)
const addForm = ref({})
const addFormRef = ref(null)
const props = {
	label: "name",
	value: "id",
	children: "children",
	checkStrictly: true,
	emitPath: false
}
const trees = ref([])
const rules = reactive({
	name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
	gender: [{ required: true, message: '请选择员工性别', trigger: 'change' }],
	job_number: [{ required: true, message: '请输入员工卡号', trigger: 'blur' }],
	mobile: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
	type: [{ required: true, message: '请选择员工类型', trigger: 'change' }],
	id_type: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
	id_number: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
	birthday: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
	avatar: [{ required: true, message: '请上传头像', trigger: 'change' }]
})
const open = (row) => {
	addForm.value = row
	show.value = true
}
const beforeUpload = (file) => {
	var reader = new FileReader()
	reader.onload = function (e) {
		addForm.value.avatar = reader.result
	}
	reader.readAsDataURL(file.raw)
}
const handleUpload = (file) => {
	console.log('handleUpload', file)
}
const loading = ref(false)
const onSubmit = async () => {
	loading.value = true
	try {
		const valid = await addFormRef.value.validate()
		if (!valid) return
		const result = await fetchCreateUser(addForm.value)
		if (result.code == 1) {
			addForm.value = {}
			loading.value = false
			emits('success')
			ElMessage.success('添加成功')
			show.value = false
		}
	} catch (error) {
		loading.value = false
		console.log(error)
	}
}
defineExpose({
	open
})
const initGroups = async () => {
	const result = await fetchUserGroup()
	if (result.code == 1) {
		trees.value = result.data[0].children
	}
}
onMounted(() => {
	initGroups()
})
</script>

<style lang="scss" module>
.logo-uploader {
	width: 120px;
	height: 120px;
}

.logo-avatar {
	width: 120px;
	height: 120px;
	display: block;
	border: 1px dashed var(--el-border-color);
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #ccc;
	width: 120px;
	height: 120px;
	text-align: center;
	border: 1px dashed var(--el-border-color);
}
</style>
